<template>
    <el-main>
        <!-- 搜索栏 -->
        <el-form :model="searchParm" :inline="true" size="default">
            <el-form-item>
                <el-input v-model="searchParm.categoryName" placeholder="请输入类型名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="searchBtn" icon="Search">搜索</el-button>
                <el-button @click="resetBtn" icon="Close" type="danger" plain>重置</el-button>
                <el-button icon="Plus" type="primary" @click="addBtn">新增</el-button>
                
            </el-form-item>
        </el-form>
        <!--表格-->
        <el-table :height="tableHeight" :data="tableList" border stripe>
            <el-table-column label="类型名称" prop="categoryName"></el-table-column>
            <el-table-column label="序号" prop="orderNum"></el-table-column>
            <el-table-column label="操作" width="220" align="center">
                <template #default="scope">
                    <el-button icon="Edit" type="primary" size="default" @click="editBtn(scope.row)">编辑</el-button>
                    <el-button icon="Delete" type="danger" size="default" @click="deleteBtn(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="searchParm.currentPage"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="searchParm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchParm.total" background>
            
        </el-pagination>
        
    </el-main>
    <!--新增弹框-->
    <SysDialog
    :title="dialog.title"
    :width="dialog.width"
    :visible="dialog.visible"
    :height="dialog.height"
    @on-close="onClose"
    @on-confirm="commit"
    >
        
        <template v-slot:content>
            <el-form :model="addModel" ref="addRef" :rules="rules" label-width="80px" :inline="false" size="default">
                <el-form-item prop="categoryName" label="类型名称">
                    <el-input v-model="addModel.categoryName"></el-input>
                </el-form-item>
                <el-form-item prop="orderNum" label="序号">
                    <el-input v-model="addModel.orderNum"></el-input>
                </el-form-item>
            </el-form>
            
        </template>
    </SysDialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref ,nextTick} from 'vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { ElMessage, FormInstance } from 'element-plus';
import {addApi,getListApi,Category,editApi,deleteApi} from '@/api/notice_category/index'

import useInstance from '@/hooks/useInstance';
 const {global} = useInstance()
//表单ref属性
const addRef = ref<FormInstance>()
//弹框属性
const {dialog,onClose,onShow} = useDialog()
//搜索对象
const searchParm = reactive({
    currentPage:1,
    pageSize:10,
    categoryName:'',
    total:0
})
//新增表单绑定的对象
const addModel = reactive({
    cagegoryId:'',
    categoryName:'',
    orderNum:''
})
//表单验证规则
const rules = reactive({
    categoryName: [
    {
      required: "true",
      trigger: ["blur","change"],
      message: "请填写类型名称",
    },
  ]
})
//标识 0：新增 1：编辑
const tags = ref("");
//新增
const addBtn = ()=>{
    tags.value = "0";
    //清空表单
    addRef.value?.resetFields();
    dialog.title = '新增'
    dialog.height = 180;
    onShow()
}
//编辑
const editBtn = (row:Category)=>{
    tags.value = "1";
    console.log(row)
    //清空表单
    addRef.value?.resetFields();
    dialog.title = '新增'
    dialog.height = 150;
    onShow()
    nextTick(()=>{
        Object.assign(addModel,row)
    })
}
//删除
const deleteBtn = async(row:Category)=>{
    console.log(row)
    const confirm = await global.$myconfirm('确定删除该数据吗？')
    if(confirm){
        let res = await deleteApi(row.cagegoryId)
        if(res && res.code == 200){
            ElMessage.success(res.msg)
            getList()
        }
    }
}
//页容量改变时触发
const sizeChange = (size: number) => {
    console.log(size);
    searchParm.pageSize = size;
    getList();
  };
  //页数改变时触发
  const currentChange = (page: number) => {
    console.log(page);
    searchParm.currentPage = page;
    getList();
  };
//表单提交
const commit = ()=>{
    //表单验证
    addRef.value?.validate(async(valid)=>{
        if(valid){
            let res =null;
            if(tags.value == '0'){
                res = await addApi(addModel)
            }else{
                res = await editApi(addModel)
            }
            if(res && res.code == 200){
                ElMessage.success(res.msg)
                getList()
                onClose()
            }
        }
    })
}
//表格数据
const tableList = ref([]);
//查询列表
const getList = async()=>{
    let res = await getListApi(searchParm);
    if(res && res.code==200){
        tableList.value = res.data.records;
        searchParm.total = res.data.total;
    }
};
//搜索
const searchBtn = ()=>{
    getList()
}
//重置
const resetBtn = ()=>{
    searchParm.categoryName = ''
    searchParm.currentPage=1;
    getList()
}
//表格高度
const tableHeight = ref(0)
onMounted(()=>{
    getList();
    nextTick(()=>{
        tableHeight.value = window.innerHeight-230;
    })
})
</script>

<style scoped>

</style>